<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="content-wrapper" th:fragment="vehicle-list" >
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">套题列表</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>车型</th>
                    <th>编号</th>
                    <th>科目</th>
                    <th>题型</th>
                    <th>id</th>




                    <th>更新按钮</th>
                    <th>删除按钮</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="vehicle:${vehicles}">

                    <td th:text="${vehicle.vehicleName}">摩托车</td>
                    <td th:text="${vehicle.vehicleType}">DEF</td>
                    <td th:text="${vehicle.subjectId}">科目一</td>
                    <td th:text="${vehicle.titleType}">基础复习</td>
                    <td th:text="${vehicle.setId}"></td>
                    <td>
                        <button  class="btn btn-primary"data-toggle="modal" data-target="#myModal" data-info=1 th:data-info="${vehicle.setId}">修改</button>

                    </td>
                    <td>
                        <a href="/vehicle/delete/id=3" th:href="${'/vehicle/delete/'+vehicle.setId}"  class="btn btn-danger delet" >删除</a>
                    </td>
                </tr>
                </tbody>

            </table>
        </div>
        <!-- /.box-body -->
    </div>
    <!--添加按钮-->
    <button  class="btn btn-google btn-block" data-toggle="modal" data-target="#myModal2" >添加车型，科目类型不同套题类型</button>

    <!--添加弹框-->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel2">New message</h4>
                </div>
                <div class="modal-body">
                    <form action="/vehicle/add" method="Post">
                        <!--restful风格-->
                        <input name="_method" value="put" type="hidden"/>
                        <div class="form-group">
                            <label  class="control-label form-control-static">id</label>
                            <input type="text" class="form-control"  name="setId" value="" readonly>
                        </div>


                        <div class="form-group">
                            <div class="form-group">
                                <label>科目类型</label>
                                <input type="text" class="form-control" name="subjectId" value="">
                            </div>

                           <!-- <input type="text" class="form-control" name="subjectId" value="">  -->
                        </div>
                        <div class="form-group">
                            <label  class="control-label">题目类型</label>
                            <input type="text" class="form-control" name="titleType" value="">
                        </div>
                        <div class="form-group">
                            <label  class="control-label">车型</label>
                            <input type="text" class="form-control" name="vehicleName" value="">
                        </div>
                        <div class="form-group">
                            <label  class="control-label">车型编号</label>
                            <input type="text" class="form-control" name="vehicleType" value="">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">添加</button>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>
    <!--修改弹框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form action="/vehicle/update" method="Post">
                        <!--restful风格-->
                        <input name="_method" value="put" type="hidden"/>
                        <div class="form-group">
                            <label  class="control-label form-control-static">id</label>
                            <input type="text" class="form-control"  name="setId" value="" readonly>
                        </div>

                        <label  class="control-label">科目类型</label>
                        <div class="form-group">
                            <input type="text" class="form-control" name="subjectId" value="">
                        </div>
                        <div class="form-group">
                            <label  class="control-label">题目类型</label>
                            <input type="text" class="form-control" name="titleType" value="">
                        </div>
                        <div class="form-group">
                            <label  class="control-label">车型</label>
                            <input type="text" class="form-control" name="vehicleName" value="">
                        </div>
                        <div class="form-group">
                            <label  class="control-label">车型编号</label>
                            <input type="text" class="form-control" name="vehicleType" value="">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">修改</button>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('#example1').DataTable({
                "language": {
                    "lengthMenu": "每页 _MENU_ 条记录",
                    "zeroRecords": "没有找到记录",
                    "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                    "infoEmpty": "无记录",
                    "infoFiltered": "(从 _MAX_ 条记录过滤)"
                }
            })
            $('#myModal').on('show.bs.modal', function (event) {
                console.log("sfsf")
                var button = $(event.relatedTarget) // 找到触发事件的按钮
                var num = button.data('info') // 从按钮的data-id 得到需要的属性
                //得到模态框

                var modal = $(this)
                //创建一个ajax请求
                $.ajax({
                    type: "get",
                    url: "/vehicle/selectbyid",
                    dataType: "json",
                    data: {
                        "type": "query",
                        "id": num,
                    },
                    /*success 回调成功函数*/
                    success: function (data) {
                        $("input[name='setId']").val(data.setId);
                        $("input[name='subjectId']").val(data.subjectId);
                        $("input[name='titleType']").val(data.titleType);
                        $("input[name='vehicleName']").val(data.vehicleName);
                        $("input[name='vehicleType']").val(data.vehicleType);

                    },
                    error: function () {
                        console.log('fail');
                    }

                })
            })
            $('#myModal2').on('show.bs.modal', function (event) {
                console.log("sfsf")
                var button = $(event.relatedTarget) // 找到触发事件的按钮
                var num = button.data('info') // 从按钮的data-id 得到需要的属性
                //得到模态框
                var modal = $(this)
                //创建一个ajax请求
                $.ajax({
                    type: "get",
                    url: "/vehicle/getmaxId",
                    dataType: "json",
                    data: {
                        "type": "query",
                        "id": num,
                    },
                    /*success 回调成功函数*/
                    success: function (data) {
                        $("input[name='setId']").val(data.setId);

                    },
                    error: function () {
                        console.log('fail');
                    }

                })
            })

        })
    </script>
</div>
<!-- page script -->
